<template>
  <div class="container-analysis">
    <Breadcrumb :items="['统计分析', '数据分析']" />
    <div class="analysis-content">
      <!-- 顶部卡片统计 -->
      <a-row :gutter="16" class="mb-4">
        <a-col :span="6" v-for="card in statisticsCards" :key="card.title">
          <a-card class="statistics-card" :loading="loading">
            <a-statistic
              :title="card.title"
              :value="card.value"
              :value-style="{ color: card.trend > 0 ? '#00B42A' : '#F53F3F' }"
            >
              <template #prefix>
                <span
                  :style="{ color: card.trend > 0 ? '#00B42A' : '#F53F3F' }"
                >
                  {{ card.trend > 0 ? '↑' : '↓' }} {{ Math.abs(card.trend) }}%
                </span>
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>

      <!-- 图表区域 -->
      <a-row :gutter="16" class="mb-4">
        <a-col :span="12">
          <a-card class="chart-card" title="用户趋势">
            <div ref="userTrendChart" class="chart-container"></div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="chart-card" title="活跃度分析">
            <div ref="activityChart" class="chart-container"></div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 底部图表 -->
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card class="chart-card" title="热门题目分析">
            <div ref="hotProblemChart" class="chart-container"></div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="chart-card" title="TOP20 题目标签占比">
            <div ref="tagChart" class="chart-container"></div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';

const loading = ref(false);

// 统计卡片数据
const statisticsCards = reactive([
  {
    title: '累计总用户数',
    value: 12,
    trend: 9.1
  },
  {
    title: '新增用户数',
    value: 2,
    trend: 22.2
  },
  {
    title: '活跃用户数',
    value: 7,
    trend: 5.3
  },
  {
    title: '日均活跃用户数',
    value: 5,
    trend: -1.2
  }
]);

// 获取今天和过去6天的日期
const getCurrentDateRange = () => {
  const dateArray = [];
  for (let i = 6; i >= 0; i--) {
    const date = new Date();
    date.setDate(date.getDate() - i);
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    dateArray.push(`${month}-${day}`);
  }
  return dateArray;
};

// 初始化图表
onMounted(() => {
  initUserTrendChart();
  initActivityChart();
  initHotProblemChart();
  initTagChart();
});

// 用户趋势图
const userTrendChart = ref();
const initUserTrendChart = () => {
  const chart = echarts.init(userTrendChart.value);
  const dateRange = getCurrentDateRange();

  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateRange
    },
    yAxis: {
      type: 'value',
      max: 15,
      min: 0,
      interval: 3
    },
    series: [
      {
        name: '总用户',
        type: 'line',
        smooth: true,
        data: [7, 8, 9, 9, 10, 10, 12],
        lineStyle: {
          color: '#165DFF'
        },
        itemStyle: {
          color: '#165DFF'
        }
      },
      {
        name: '活跃用户',
        type: 'line',
        smooth: true,
        data: [5, 6, 6, 5, 6, 7, 7],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(22, 93, 255, 0.3)' },
            { offset: 1, color: 'rgba(22, 93, 255, 0.1)' }
          ])
        },
        lineStyle: {
          color: '#165DFF'
        },
        itemStyle: {
          color: '#165DFF'
        }
      }
    ]
  });
};

// 活跃度分析图
const activityChart = ref();
const initActivityChart = () => {
  const chart = echarts.init(activityChart.value);
  const dateRange = getCurrentDateRange();

  chart.setOption({
    tooltip: {
      trigger: 'axis',
      formatter: '{b}<br/>{a}: {c}%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateRange
    },
    yAxis: {
      type: 'value',
      max: 100,
      min: 0,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '活跃度',
        type: 'line',
        smooth: true,
        data: [71, 75, 66, 55, 60, 70, 58],
        lineStyle: {
          color: '#ff7d00'
        },
        itemStyle: {
          color: '#ff7d00'
        },
        label: {
          show: true,
          formatter: '{c}%',
          position: 'top'
        }
      }
    ]
  });
};

// 热门题目分析图
const hotProblemChart = ref();
const initHotProblemChart = () => {
  const chart = echarts.init(hotProblemChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      max: 11
    },
    yAxis: {
      type: 'category',
      data: [
        'C语言指针与内存',
        'Java多线程基础',
        'C语言数组与字符串',
        'JavaScript闭包',
        'Java虚拟机原理'
      ].reverse()
    },
    series: [
      {
        type: 'bar',
        data: [9, 7, 6, 5, 4],
        itemStyle: {
          color: '#ff9a7a'
        }
      }
    ]
  });
};

// 题目标签占比图
const tagChart = ref();
const initTagChart = () => {
  const chart = echarts.init(tagChart.value);
  chart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}题 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [
      {
        name: '题目标签',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            formatter: '{b}: {c}题\n{d}%'
          }
        },
        data: [
          { value: 8, name: '动态规划' },
          { value: 4, name: '双指针' },
          { value: 3, name: '二叉树' },
          { value: 3, name: '图算法' },
          { value: 2, name: '哈希表' }
        ]
      }
    ]
  });
};
</script>

<style scoped lang="less">
.container-analysis {
  padding: 0 20px 20px;

  .analysis-content {
    .mb-4 {
      margin-bottom: 16px;
    }

    .statistics-card {
      background-color: var(--color-bg-2);
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
      }

      :deep(.arco-statistic) {
        .arco-statistic-title {
          color: var(--color-text-2);
          font-size: 14px;
          margin-bottom: 8px;
        }

        .arco-statistic-value {
          font-size: 24px;
          font-weight: 500;
        }
      }
    }

    .chart-card {
      height: 100%;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
      }

      :deep(.arco-card-header) {
        border-bottom: 1px solid var(--color-border);
      }

      :deep(.arco-card-body) {
        padding: 16px;
      }
    }

    .chart-container {
      height: 300px;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}

:deep(.arco-card) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  .arco-card-header {
    border-radius: 8px 8px 0 0;
  }
}
</style>
